<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/js/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <style>
        #shurukuang{
            background-color: rgb(205,205,205);
        }

        #top{
            background-color: rgb(240,240,240);
            height: 130px;
        }
        #search{
            margin-top: 23px;
        }
        #shurukuang{
            color:black;
            height: 80px;
            font-size: 45px;
        }
        #back{
            width:53px;
            line-height: 130px;
            font-size: 60px;
            margin-left: 6px;
        }

        .category{
            height: 120px;
            background-color:rgb(70,70,70) ;
        }
        .categoryleft{
            height: 120px;
            line-height: 120px;
            font-size: 40px;
            color:white;
            float: left;
            margin-left: 10px;
        }
        .categoryright{
            height:120px;
            line-height: 120px;
            font-size: 40px;
            color: whitesmoke;
            float: right;
            margin-right: 10px;
        }
        .gengduo{
            text-decoration: none;
            color:antiquewhite;
        }
        .outter{
            width: 100%;
        }
        #sousuo{
            width: 120px;
            font-size: 60px;
        }
    </style>
</head>
<body>
   <div id="app">
       <div class="outter">
       <el-row :gutter="10" id="top">
           <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
               <div id="back">
                   <i class="el-icon-arrow-left"></i>
               </div>
           </el-col>
           <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
               <div >
                   <div id="search"  >
                       <el-input id="shurukuang" placeholder="请输入内容" v-model="searchcontext">
                           <el-button id="sousuo" slot="append" icon="el-icon-search"></el-button>
                       </el-input>
                   </div>
               </div>
           </el-col>
           <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
               <div >

               </div>
           </el-col>
       </el-row>
       </div>

       <el-row :gutter="10">
           <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
               <div >
                   <template>
                       <div class="block">
                           <el-carousel height="480px">
                               <el-carousel-item v-for="item in lunbo" :key="item">
                                   <img :src="item" width="100%" />
                               </el-carousel-item>
                           </el-carousel>
                       </div>
                   </template>
               </div>
           </el-col>
       </el-row>

       <el-row :gutter="10">
           <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
               <div class="category">
                    <div class="categoryleft">
                        <b><i class="el-icon-truck">&nbsp;&nbsp;</i><span>房车模型</span></b>
                    </div>
                    <div class="categoryright">
                        <a class="gengduo" href=""><b><span>更多</span><i class="el-icon-arrow-right"></i></b></a>
                    </div>
               </div>
           </el-col>
       </el-row>
       <el-row :gutter="10">
           <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
               <div class="category">
                   <div class="categoryleft">
                       <b><i class="el-icon-s-shop">&nbsp;&nbsp;</i><span>旅游装备</span></b>
                   </div>
                   <div class="categoryright">
                       <a class="gengduo" href=""><b><span>更多</span><i class="el-icon-arrow-right"></i></b></a>
                   </div>
               </div>
           </el-col>
       </el-row>

       <el-row :gutter="10">
           <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
               <div class="category">
                   <div class="categoryleft">
                       <b><i class="el-icon-hot-water">&nbsp;&nbsp;</i><span>土特产</span></b>
                   </div>
                   <div class="categoryright">
                       <a class="gengduo" href=""><b><span>更多</span><i class="el-icon-arrow-right"></i></b></a>
                   </div>
               </div>
           </el-col>
       </el-row>

   </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                searchcontext:"",
                lunbo:[
                    "/img/Liu/jishilunbo/lunbo1.jpg",
                    "/img/Liu/jishilunbo/lunbo2.jpg",
                    "/img/Liu/jishilunbo/lunbo3.jpg"
                ]
            },
            methods:{

            }

        });

    </script>
</body>
</html>